// 添加商品的总布局
import React            from 'react';
import MUtil            from 'util/mm.jsx';
import Product          from 'service/product-service.jsx';
import PageTitle        from 'component/page-title/index.jsx';
import CategorySelector from './category-selector.jsx';

import './save.scss';

const __mm      = new MUtil();
const __product = new Product();

class ProductDetail extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      id                : this.props.match.params.pid,
      name              : '',
      subtitle          : '',
      categoryId        : 0,
      paraentCategoryId : 0,
      subImages         : [],
      price             : '',
      stock             : '',
      detail            : '',
      status            : 1  // 商品状态1为在售
    }
  }

  componentDidMount(){
    this.loadProduct();
  }

  // 如果有这个 id 那就是编辑，如果没有,那就是添加,不做处理
  loadProduct(){
    // 有id的时候，表示是编辑功能，需要表单回填
    if(this.state.id){
      __product.getProduct(this.state.id).then((res) => {
        // console.log(res)
        // split() 字符串 -> 数组
        // 特殊字段的处理
        let images = res.subImages.split(',');
        res.subImages = images.map((imgUri) => {
          return {
            uri : imgUri,
            url : res.imageHost + imgUri
          }
        });
        this.setState(res);
      }, (errMsg) => {
        __mm.errTips(errMsg);
      });
    }
  }

  render(){
    return (
      <div id="page-wrapper">
        <PageTitle title="查看商品" />
        <div className="form-horizontal">
          <div className="form-group">
            <label className="col-md-2 control-label">商品名称</label>
            <div className="col-md-5">
              <p className="form-control-static">{this.state.name}</p>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品描述</label>
            <div className="col-md-5">
            <p className="form-control-static">{this.state.subtitle}</p>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">所属分类</label>
            <CategorySelector
              readOnly
              categoryId={this.state.categoryId}
              parentCategoryId={this.state.parentCategoryId}
            />
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品价格</label>
            <div className="col-md-3">
              <div className="input-group">
                <input
                  type="number"
                  className="form-control"
                  value={this.state.price}
                  readOnly
                />
                <span className="input-group-addon" id="basic-addon2">元</span>
              </div>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品库存</label>
            <div className="col-md-3">
              <div className="input-group">
                <input
                  type="number"
                  className="form-control"
                  value={this.state.stock}
                  readOnly
                />
                <span className="input-group-addon" id="basic-addon2">件</span>
              </div>
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品图片</label>
            <div className="col-md-10">
              {
                this.state.subImages.length ? this.state.subImages.map(
                  (image, index) => (
                    <div className="img-con" key={index}>
                      <img src={image.url} className="img"/>
                    </div>)
                ): (<div>暂无图片</div>)
              }
            </div>
          </div>
          <div className="form-group">
            <label className="col-md-2 control-label">商品详情</label>
            <div className="col-md-10" dangerouslySetInnerHTML={{__html: this.state.detail}}></div>
          </div>
        </div>
      </div>
    );
  }
}

export default ProductDetail;
